<template>
  <view class="parking-container">
    <view class="parking-info">
      <view class="info-card" v-for="spot in parkingSpots" :key="spot.id">
        <view class="card-status" :class="getStatusClass(spot.status)">
          {{ getStatusText(spot.status) }}
        </view>
        
        <view class="card-content">
          <view class="spot-title">{{ spot.number }}</view>
          
          <view class="info-item">
            <text class="label">位置</text>
            <text class="value">{{ spot.location }}</text>
          </view>
          
          <view class="info-item">
            <text class="label">到期</text>
            <text class="value">{{ spot.expireDate }}</text>
          </view>
          
          <view class="info-item">
            <text class="label">类型</text>
            <text class="value">{{ spot.type }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.parking-info {
  padding: 20rpx;
}

.info-card {
  background: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  position: relative;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-status {
  position: absolute;
  right: 0;
  top: 0;
  padding: 6rpx 20rpx;
  border-radius: 0 12rpx 0 12rpx;
  font-size: 24rpx;
  
  &.status-active {
    background: #E8F5E9;
    color: #4CAF50;
  }
  
  &.status-expired {
    background: #FFEBEE;
    color: #F44336;
  }
  
  &.status-pending {
    background: #E3F2FD;
    color: #2196F3;
  }
}

.card-content {
  padding: 30rpx;
}

.spot-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 28rpx;
  
  .label {
    color: #999;
    width: 80rpx;
    margin-right: 20rpx;
  }
  
  .value {
    color: #333;
    flex: 1;
  }
}

.status-active {
  background: #E8F5E9;
  color: #4CAF50;
}

.status-expired {
  background: #FFEBEE;
  color: #F44336;
}

.status-pending {
  background: #E3F2FD;
  color: #2196F3;
}

.card-actions {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f5f5f5;
}

.btn-renew {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #6a11cb 0%, #8e44ad 100%);
  color: #fff !important;
  border-radius: 45rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 17, 203, 0.3);
  transition: all 0.3s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

</style>

<script>
export default {
  data() {
    return {
      parkingSpots: [
        {
          id: 1,
          number: 'A-123',
          location: '地下一层',
          type: '固定车位',
          status: 'active', // active: 使用中, expired: 已过期, pending: 待审核
          expireDate: '2025-12-31'
        }
      ]
    }
  },
  methods: {
    getStatusText(status) {
      return {
        active: '使用中',
        expired: '已过期',
        pending: '待审核'
      }[status] || '未知'
    },
    getStatusClass(status) {
      return {
        'status-active': status === 'active',
        'status-expired': status === 'expired',
        'status-pending': status === 'pending'
      }
    },
    shouldShowRenew(spot) {
      // 显示续费按钮的逻辑
      const expireDate = new Date(spot.expireDate);
      const now = new Date();
      const daysUntilExpire = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
      return daysUntilExpire <= 30 || spot.status === 'expired';
    },
    handleRenew(spot) {
      // 处理续费逻辑
      console.log('续费车位:', spot.number);
    },
  }
}
</script>
